<template>
  <div class="social-media">
    <!-- 顶部时间 -->
    <CurrentDate title="SOCIAL MEDIA"></CurrentDate>
    <!-- 1折叠 -->
    <CollapsibleSection
      title="1. Official Accounts"
      :tooltip-title="'Official Accounts'"
      :tooltip-content="[
        'This section tracks the performance of your brand-owned social media accounts, including Instagram, YouTube, LinkedIn, and others.',
        'Metrics such as likes, comments, shares, and saves are collected from content posted directly by your official profiles.',
        'Use this to monitor your outbound communication efforts and content effectiveness across platforms.',
      ]"
      @toggle-collapse="handleCollapse"
      :panelIndex="0"
      :isExpanded="panelStates[0]"
    ></CollapsibleSection>
    <!-- socialmedia -->
    <div class="pieEcharts" v-if="!panelStates[0]">
      <div style="margin-right: 20px; flex: 2">
        <SocialMediaPlatform></SocialMediaPlatform>
      </div>
      <div style="flex: 1">
        <OverallPerformance></OverallPerformance>
      </div>
    </div>
    <!-- 指标项 -->
    <SocialMetrics :show-type="false" v-if="!panelStates[0]"></SocialMetrics>
    <!-- 评论点赞细节 -->
    <EngagementType
      style="margin-top: 20px"
      v-if="!panelStates[0]"
    ></EngagementType>

    <!-- 2折叠 -->
    <!-- 第二个折叠面板 -->
    <CollapsibleSection
      title="2. Guest Voices Feed"
      :tooltip-title="'Guest Voices Feed'"
      :tooltip-content="[
        'This section analyzes user-generated content (UGC) that mentions or features your brand on public social media — even if not posted by you.Engagements (likes, comments, shares, saves, mentions) are collected from UGC across platforms like TikTok, X, Reddit, and Instagram.This helps you understand organic buzz, brand perception, and word-of-mouth impact beyond your official channels.',
      ]"
      @toggle-collapse="handleCollapse"
      :panelIndex="1"
      :isExpanded="panelStates[1]"
    ></CollapsibleSection>
    <!-- 时间筛选 -->
    <DateTimePickerSocialMeida v-if="!panelStates[1]"></DateTimePickerSocialMeida>
    <!-- 平台筛选 -->
    <PlatformPickerSocialMedia v-if="!panelStates[1]"></PlatformPickerSocialMedia>
    <!-- 社交媒体 -->
    <SocialMeidaSmall
      style="margin-top: 20px"
      v-if="!panelStates[1]"
    ></SocialMeidaSmall>
    <!-- 指标项 -->
    <SocialMetrics
      style="margin-top: 20px"
      v-if="!panelStates[1]"
    ></SocialMetrics>
    <!-- 平台筛选评论点赞细节 -->
    <PlatFormType
      style="margin-top: 20px"
      v-if="!panelStates[1]"
    ></PlatFormType>

    <!-- 2.1折叠 -->
    <CollapsibleSection
      title="2.1 Engagements Analysis"
      :tooltip-title="'Posts'"
      :tooltip-content="['Number of user-generated content pieces collected']"
      @toggle-collapse="handleCollapse"
      :panelIndex="2"
      :isExpanded="panelStates[2]"
    ></CollapsibleSection>
    <!-- 柱状图 -->
    <div class="SourceAndTime" v-if="!panelStates[2]">
      <SourceEngagementChart></SourceEngagementChart>
      <TimeSeriesEngagementChart></TimeSeriesEngagementChart>
    </div>
    <MultiLineEngagementChart v-if="!panelStates[2]"></MultiLineEngagementChart>
    <!-- 散点图 -->
    <HashtagDetection v-if="!panelStates[2]"></HashtagDetection>
    <!-- ai洞察 -->
    <AIPoweredInsightCard v-if="!panelStates[2]"></AIPoweredInsightCard>

    <!-- 2.2折叠 -->
    <CollapsibleSection
      title="2.2 Sentiment Analysis"
      :tooltip-title="'Posts'"
      :tooltip-content="['Number of user-generated content pieces collected']"
      @toggle-collapse="handleCollapse"
      :panelIndex="3"
      :isExpanded="panelStates[3]"
    ></CollapsibleSection>
    <div class="SourceAndTime" v-if="!panelStates[3]">
      <SentimentdsBySources></SentimentdsBySources>
      <SetimentTime></SetimentTime>
    </div>
    <div class="progress" v-if="!panelStates[3]">
      <DirectMentions></DirectMentions>
      <KeywordAnalysis></KeywordAnalysis>
    </div>
    <EmotionTrendChart v-if="!panelStates[3]"></EmotionTrendChart>

    <!-- 2.3折叠 -->
    <CollapsibleSection
      title="2.3 Hyperlink for direct access"
      :tooltip-title="'Posts'"
      :tooltip-content="['Number of user-generated content pieces collected']"
      @toggle-collapse="handleCollapse"
      :panelIndex="4"
      :isExpanded="panelStates[4]"
    ></CollapsibleSection>
    <!-- 社交媒体洞察 -->
    <SocialMediaFeedbackTable v-if="!panelStates[4]"></SocialMediaFeedbackTable>

    <!-- 2.4折叠 -->
    <CollapsibleSection
      title="2.4 Competition Landscape"
      :tooltip-title="'Posts'"
      :tooltip-content="['Number of user-generated content pieces collected']"
      @toggle-collapse="handleCollapse"
      :panelIndex="5"
      :isExpanded="panelStates[5]"
    ></CollapsibleSection>
    <CompetitionTrendVisual v-if="!panelStates[5]"></CompetitionTrendVisual>
    <div class="SourceAndTime" v-if="!panelStates[5]">
      <SentimentComChar></SentimentComChar>
      <CompetitionKpiTable></CompetitionKpiTable>
    </div>

    <!-- 2.5折叠 -->
    <CollapsibleSection
      title="2.5 Customer Journey"
      :tooltip-title="'Posts'"
      :tooltip-content="['Number of user-generated content pieces collected']"
      @toggle-collapse="handleCollapse"
      :panelIndex="6"
      :isExpanded="panelStates[6]"
    ></CollapsibleSection>
    <CustomerJourney v-if="!panelStates[6]"></CustomerJourney>

    <!-- 2.6折叠 -->
    <CollapsibleSection
      title="2.6 top influencers by sourse"
      @toggle-collapse="handleCollapse"
      :panelIndex="7"
      :isExpanded="panelStates[7]"
    ></CollapsibleSection>
    <TopInfluencers v-if="!panelStates[7]"></TopInfluencers>
  </div>
</template>

<script>
// 基础通用组件
import CurrentDate from "@components/common/CurrentDate.vue";
import CollapsibleSection from "@components/common/CollapsibleSection.vue";

// 1. Official Accounts 相关组件
import SocialMediaPlatform from "./components/echarts/circlePie/SocialMediaPlatform.vue";
import OverallPerformance from "./components/echarts/circlePie/OverallPerformance.vue";
import SocialMetrics from "./components/SocialMetrics.vue";
import EngagementType from "./components/echarts/circlePie/EngagementType.vue";

// 2. Guest Voices Feed 相关组件
import DateTimePickerSocialMeida from "@views/socialMedia/components/DateTimePickerSocialMeida.vue";
import PlatformPickerSocialMedia from "@views/socialMedia/components/PlatformPickerSocialMedia.vue";
import SocialMeidaSmall from "./components/echarts/circlePie/SocialMeidaSmall.vue";
import PlatFormType from "./components/echarts/circlePie/PlatFormType.vue";

// 2.1 Engagements Analysis 相关组件
import SourceEngagementChart from "@views/socialMedia/components/echarts/BarChart/SourceEngagementChart.vue";
import TimeSeriesEngagementChart from "@views/socialMedia/components/echarts/BarChart/TimeSeriesEngagementChart.vue";
import MultiLineEngagementChart from "./components/echarts/LinePie/MultiLineEngagementChart.vue";
import HashtagDetection from "@views/socialMedia/components/echarts/ScatterPlot/HashtagDetection.vue";
import AIPoweredInsightCard from "./components/AIPoweredInsightCard.vue";

// 2.2 Sentiment Analysis 相关组件
import SentimentdsBySources from "@views/socialMedia/components/echarts/BarChart/SentimentdsBySources.vue";
import SetimentTime from "@views/socialMedia/components/echarts/BarChart/SetimentTime.vue";
import DirectMentions from "./components/echarts/circlePie/DirectMentions.vue";
import KeywordAnalysis from "./components/echarts/Progress/KeywordAnalysis.vue";
import EmotionTrendChart from "./components/echarts/LinePie/EmotionTrendChart.vue";

// 2.3 Hyperlink for direct access 相关组件
import SocialMediaFeedbackTable from "./components/SocialMediaFeedbackTable.vue";

// 2.4 Competition Landscape 相关组件
import CompetitionTrendVisual from "./components/echarts/LinePie/CompetitionTrendVisual.vue";
import SentimentComChar from "@views/socialMedia/components/echarts/BarChart/SentimentComChar.vue";
import CompetitionKpiTable from "./components/CompetitionKpiTable.vue";

// 2.5 Customer Journey 相关组件
import CustomerJourney from "./components/echarts/LinePie/CustomerJourney.vue";

// 2.6 top influencers by sourse 相关组件
import TopInfluencers from "./components/TopInfluencers.vue";

export default {
  components: {
    // 基础通用组件
    CurrentDate,
    CollapsibleSection,

    // 1. Official Accounts 相关组件
    SocialMediaPlatform,
    OverallPerformance,
    SocialMetrics,
    EngagementType,

    // 2. Guest Voices Feed 相关组件
    DateTimePickerSocialMeida,
    PlatformPickerSocialMedia,
    SocialMeidaSmall,
    PlatFormType,

    // 2.1 Engagements Analysis 相关组件
    SourceEngagementChart,
    TimeSeriesEngagementChart,
    MultiLineEngagementChart,
    HashtagDetection,
    AIPoweredInsightCard,

    // 2.2 Sentiment Analysis 相关组件
    SentimentdsBySources,
    SetimentTime,
    DirectMentions,
    KeywordAnalysis,
    EmotionTrendChart,

    // 2.3 Hyperlink for direct access 相关组件
    SocialMediaFeedbackTable,

    // 2.4 Competition Landscape 相关组件
    CompetitionTrendVisual,
    SentimentComChar,
    CompetitionKpiTable,

    // 2.5 Customer Journey 相关组件
    CustomerJourney,

    // 2.6 top influencers by sourse 相关组件
    TopInfluencers,
  },
  data() {
    return {
      panelStates: {
        0: false, // 1. Official Accounts
        1: false, // 2. Guest Voices Feed
        2: false, // 2.1 Engagements Analysis
        3: false, // 2.2 Sentiment Analysis
        4: false, // 2.3 Hyperlink for direct access
        5: false, // 2.4 Competition Landscape
        6: false, // 2.5 Customer Journey
        7: false, // 2.6 top influencers by sourse
      },
    };
  },
  methods: {
    handleCollapse(panelData) {
      console.log(`面板${panelData.panelIndex}状态：`, panelData.isExpanded);
      if (!this.panelStates) {
        this.panelStates = {};
      }
      console.log("更新前 panelStates:", this.panelStates);
      this.panelStates[panelData.panelIndex] = panelData.isExpanded;
      console.log("更新后 panelStates:", this.panelStates);
    },
  },
};
</script>

<style lang="scss" scoped>
html,
body {
  height: 100%;
  margin: 0;
}

.social-media {
  display: flex; 
  flex-direction: column; 
  // margin: 22px 17px 22px 17px;
}

.pieEcharts {
  display: flex;
  width: 100%;
  height: auto; 
  margin-bottom: 20px; 
}

.pieEcharts > div {
  flex: 1;
  min-width: 0; 
  overflow: visible; 
}

.EngagementType {
  flex: 1;
}
.SourceAndTime {
  display: flex; 
  gap: 12px; 
  height: auto; 
  min-height: 300px; 

  > * {
    flex: 1; 
    min-height: 100%; 
  }
}
.progress {
  margin-top: 20px;
  display: flex;
  gap: 12px; 
  > * {
    flex: 1 1 calc(50% - 6px); 
    min-width: 0; 
  }
}
</style>